<template>
      <div id="fa">
            <div class="container">
                  <div class="bg">
                        <img src="../../assets/img/fabg.png" alt="">
                  </div>
                  <div class="title">
                        <div class="top">
                              垂直开源的行业解决方案<br />助力商家提效降本
                        </div>
                        <div class="bottom">
                              针对性解决方案助力商户增值，营销体验带动用户流量提升
                        </div>
                  </div>
                  <!-- list -->
                  <div class="list">
                        <div class="item" v-for="(item, index) in list" :key="index">
                              <div class="iconbox">
                                    <img :src="item.icon" alt="">
                              </div>
                              <div class="titles">
                                    {{ item.title }}
                              </div>
                              <div class="line"></div>
                              <div class="info">
                                    {{ item.info }}
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    icon: require("../../assets/img/i1.png"),
                                    title: "智慧餐厅",
                                    info: "一站式点餐服务高效稳定一安装设备覆盖，降低成本"
                              },
                              {
                                    icon: require("../../assets/img/i2.png"),
                                    title: "生活缴费",
                                    info: "线上线下联动业务理强大的支付结算能力，账单一键通知云计算安全无误"
                              },
                              {
                                    icon: require("../../assets/img/i3.png"),
                                    title: "智慧网咖",
                                    info: "无人收银降低成本，人脸识别高效开机在线点餐一键送达"
                              },
                              {
                                    icon: require("../../assets/img/i4.png"),
                                    title: "智慧酒店",
                                    info: "极速退款、会员体系、简易对账、成本低廉"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#fa {
      width: 100%;
      max-width: 750px;
      margin-top: 0.3rem;
      .container {
            width: 100%;
            position: relative;
            left: 0;
            top: 0;
            .bg {
                  width: 100%;
                  height: 4.5rem;
                  overflow: hidden;
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: -1;
                  img {
                        width: 100%;
                        height: 4.5rem;
                        display: block;
                  }
            }
            .title {
                  width: 100%;
                  color: #fff;
                  text-align: center;
                  .top {
                        font-size: 0.36rem;
                  }
                  .bottom {
                        font-size: 0.18rem;
                        margin-top: 0.1rem;
                  }
            }
            .list {
                  width: 100%;
                  padding: 0.1rem 0.4rem;
                  display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  justify-content: space-between;
                  .item {
                        width: 3.2rem;
                        height: 2.5rem;
                        border-radius: 0.3rem;
                        background-color: #fff;
                        text-align: center;
                        margin-bottom: 0.2rem;
                        border: 1px solid #f3f3f3;
                        padding-top: 0.2rem;
                        .iconbox {
                              width: 0.7rem;
                              height: 0.7rem;
                              overflow: hidden;
                              margin: 0 auto;
                              img {
                                    display: block;
                                    width: 0.7rem;
                                    height: 0.7rem;
                              }
                        }
                        .line {
                              width: 1rem;
                              height: 1px;
                              border: 1px solid #1c9ff2;
                              margin: 0.1rem auto;
                        }
                        .titles {
                              font-size: 0.24rem;
                              margin: 0.1rem 0;
                        }
                        .info {
                              font-size: 0.18rem;
                        }
                  }
            }
      }
}
</style>